<script setup>
import { useRouter } from 'vue-router'
import bus from "src/utils/eventBus";
import {ref} from "vue";
const router = useRouter()
let isExplain = ref(true)
window['explain'] = true;
const toMyRoom = () => {
    router.push('/room');
}
const changeExplain = () => {
  window['explain'] = isExplain;
}
const callIm = () => {
    window.local.href = 'https://www.flopsai.cn/#/aiQa';
}
</script>

<template>
    <div class="main-top">
        <div class="logo-tit">
            <img src="../../assets/images/logo-b.jpg" alt="">
            <span class="tit">
          <span class="t1">小旌</span>
        </span>
        </div>
        <div class="user-tit">
<!--          <q-toggle class="from-network" v-model="isExplain" @update:model-value="changeExplain" color="#4d6bfe" label="是否解释事项" left-label/>-->
            <div class="user-tit-opa" @click="callIm">
                <q-icon name="style" class="text-orange" size="16px"/>
                <span>切换旧版</span>
            </div>
            <div class="user-tit-opa">
                <q-icon name="warning" class="text-orange" size="16px"/>
                <span>功能反馈</span>
            </div>
            <div class="user-tit-opa" @click="toMyRoom">
                <q-icon name="warning" class="text-orange" size="16px"/>
                <span>个人中心</span>
            </div>
            <div>
                <img class="user-img" src="../../assets/images/Arabian-Man.png" alt="">
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.main-top {
    background: #fff;
    box-shadow: 0 3px 12px rgba(98, 107, 181, .25);
    border-radius: 20px 20px 0 0;
    height: 62px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .logo-tit {
        img {
            width: 30px;
            height: 30px;
            margin-left: 30px;
        }

        .tit {
            vertical-align: top;
            font-size: 20px;
            margin-left: 10px;

            .t1 {
                color: #1976D2;
                font-weight: bold;
            }

            .t2 {
                color: gray;
                font-weight: 300;
            }
        }
    }

    .user-tit {
        margin-right: 30px;
        display: flex;
        align-items: center;

        .user-tit-opa {
            margin: 0 20px;
            cursor: pointer;
            font-size: 14px;
            color: #878aab;

            i {
                margin-right: 5px;
            }
        }

        .user-tit-opa:hover {
            transition: all .3s;
            -webkit-transform: translateZ(0) translateY(-4px);
            border-bottom: 3px solid;
        }

        .user-img {
            width: 30px;
            height: 30px;
            margin: 0 20px;
        }
    }
}
</style>
